<template>
    <view class="org-select-page">

        <view class="logo-container">
            <image :src="OrgImg" mode="widthFix" class="logo-img"></image>
            <text class="title">请选择要登录的组织</text>
        </view>

        <!-- 组织列表 -->
        <view class="org-list">
            <view v-for="(item, index) in orgList" :key="index" @click="selectOrg(index)" class="org-item">
                <!-- 组织图标 -->
                <image :src="item.logo" mode="widthFix" class="org-icon"></image>

                <!-- 组织名称 -->
                <text class="org-name">{{ item.name }}</text>

                <!-- 选择状态（空心/实心圆） -->
                <view class="select-indicator" :class="{ 'selected': index === selectedIndex }"></view>
            </view>
        </view>

        <!-- 底部进入按钮 -->
        <button class="enter-btn" @click="handleEnter">进入</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            selectedIndex: 1, // 默认选中第二个（云租通）
            OrgImg: `${this.$baseIMGUrl}/static/assets/img/login/logo.png`,
            orgList: [
                {
                    name: '物业通',
                    logo: `${this.$baseIMGUrl}/static/assets/img/login/logo.png` // 替换为实际图标路径
                },
                {
                    name: '云租通',
                    logo: `${this.$baseIMGUrl}/static/assets/img/login/logo.png` // 替换为实际图标路径
                }
                // 可添加更多组织
            ]
        };
    },
    methods: {
        // 返回上一页
        navigateBack() {
            uni.navigateBack({
                delta: 1
            });
        },

        // 选择组织
        selectOrg(index) {
            this.selectedIndex = index;
        },

        // 点击进入按钮
        handleEnter() {
            //   const selectedOrg = this.orgList[this.selectedIndex];
            //   // 这里添加登录逻辑，例如存储选中的组织信息
            //   uni.setStorageSync('selectedOrg', selectedOrg);

            uni.switchTab({
                url: '/pages/home/index'
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.org-select-page {
    min-height: 100vh;
    background-color: #ffffff;
    padding-top: 220rpx;
    box-sizing: border-box;

    // 返回按钮
    .back-btn {
        padding: 0 30rpx;
        margin-bottom: 60rpx;
    }

    // Logo和标题容器
    .logo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 80rpx;

        .logo-img {
            width: 160rpx;
            height: 160rpx;
            margin-bottom: 30rpx;
        }

        .title {
            font-size: 34rpx;
            color: #333333;
            font-weight: 500;
        }
    }

    // 组织列表
    .org-list {
        padding: 0 30rpx;

        .org-item {
            display: flex;
            align-items: center;
            padding: 30rpx;
            background-color: #f7f8fa;
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            position: relative; // 用于定位选择指示器

            .org-icon {
                width: 64rpx;
                height: 64rpx;
                margin-right: 28rpx;
            }

            .org-name {
                font-size: 32rpx;
                color: #333333;
                flex: 1; // 占满剩余空间，让选择器靠右
            }

            // 选择指示器（空心圆）
            .select-indicator {
                width: 36rpx;
                height: 36rpx;
                border: 2rpx solid #c9cdD4;
                border-radius: 50%;
                box-sizing: border-box;
            }

            // 选中状态（实心圆）
            .select-indicator.selected {
                border-color: #4080FF;
                background-color: #4080FF;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    width: 16rpx;
                    height: 16rpx;
                    background-color: white;
                    border-radius: 50%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    // 进入按钮
    .enter-btn {
        width: calc(100% - 60rpx);
        height: 100rpx;
        line-height: 100rpx;
        background-color: #4080FF;
        color: white;
        font-size: 34rpx;
        border-radius: 16rpx;
        position: fixed;
        bottom: 30rpx;
        left: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 16rpx rgba(64, 128, 255, 0.3);
    }
}
</style>